<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>剂量转换</title>
    <script src="../js/jquery-2.1.4.min.js"></script>
    <script src="../js/mui.min.js"></script>
    <link href="../css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../css/cw.css"/>
    <script src="../js/global.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="../js/public.js" ></script>
    <script type="text/javascript" src="../js/app/jk-counter.js" ></script>
    <script type="text/javascript" charset="UTF-8">
      	mui.init();
    </script>
    <style type="text/css">
    	.mui-radio input[type=radio]:checked:before {content: '\e440';color:#8dc21f;}
    	.mui-checkbox input[type=checkbox]:before, .mui-radio input[type=radio]:before{font-size:14px;position:relative;top:-5px;}
    	.mui-checkbox.mui-left label, .mui-radio.mui-left label{padding-right:0px;padding-left:40px;}
    	.mui-input-group:after,.mui-input-group:before,.mui-table-view:after,.mui-table-view:before{height: 0px;}  	
    </style>
</head>
<body class="background">
	<header id="header" class="mui-bar mui-bar-nav">
		<i class="mui-icon mui-icon-back mui-action-back"></i>
		<h1 class="mui-title ">剂量转换</h1>
	</header> 
	<div id="content" class="mui-content background"></div>
	<div class="mui-input-group counter-input-1 table-view-cell">
		<div class="mui-radio mui-left">
			<label>汉</label>
			<input name="radio1" type="radio" value=1 checked>
		</div>
		<div class="mui-radio mui-left">
			<label>宋</label>
			<input name="radio1" type="radio" value=2>
		</div>	
	</div> 
	<div class="counter-input-2 table-view-cell ">
	<div class="table-view-cell">
		<input type="number" name="" class="qian" value="" />
		<span class="jiantou-1 mui-text-center">
			&nbsp;<span class="shi"></span>&nbsp;
			<span class="iconfont jiantou">&#xe638;</span>&nbsp;
		</span>
		<div class="mui-table-view danwei-list">
			<!--<li class="mui-table-view-cell">两</li>
			<li class="mui-table-view-cell">石</li>
			<li class="mui-table-view-cell">均</li>
			<li class="mui-table-view-cell">斤</li>-->
			<div class="han"></div>
			<div class="song" style="display: none;"></div>
		</div>
	</div>
	<div class="table-view-cell">
		<input type="number" name="" class="zong" value=""disabled=""/>
		<span class="jiantou-1 mui-text-center">
			<span class="ke"></span>	
		</span>		
	</div>
	</div>
	<div class="clear-both mui-table-view counter-text">
		<!--<li>梧桐子大=大黄豆</li>
		<li>蜀椒1升=50克</li>
		<li>半方寸匙=1.5克</li>
		<li>五味子1升=50克</li>-->
	</div>
</body>
	
	<script type="text/javascript">
		$(document).ready(function(){
			$(".jiantou-1").on('tap',function(){
				if($(".danwei-list").is(":hidden")){
					$(".danwei-list").show()
					$(".jiantou").css({'-webkit-transform':'rotate(0deg)','-moz-transform':'rotate(0deg)'});
				}else{
					$(".jiantou").css({'-webkit-transform':'rotate(-180deg)','-moz-transform':'rotate(-180deg)'});
					$(".danwei-list").hide();
				}
			});
			$(".danwei-list > li").on('tap',function(){
				$(".jiantou").css({'-webkit-transform':'rotate(-180deg)','-moz-transform':'rotate(-180deg)'});
				$(".danwei-list").hide();
//				$(".jiantou-1 > span:eq(0)").text($(this).text())
			});
		})
	</script>
</html>